<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
				<div class="xl:flex">
					<div>
						<el-form-item label="采购内容" prop="name">
							<div class="w-80">
								<el-input v-model="formData.name" placeholder="请输入采购内容" type="textarea"
									:autosize="{ minRows: 3, maxRows: 3 }" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="选择企业" prop="cid">
									   <el-select
									      v-model="formData.q_id"
										filterable
									      placeholder="请选择企业"
									      style="width: 340px"
									    >
									      <el-option
									        v-for="item in qiyexinxi.data"
									        :key="item.id"
									        :label="item.name"
									        :value="item.id"
									      />
									    </el-select>
						</el-form-item>
						<el-form-item label="交货地" prop="producer">
							<div class="w-80">
								<el-input v-model="formData.producer" placeholder="请输入交货地" />
							</div>
						</el-form-item>
						<el-form-item label="品种规格" prop="specifications">
							<div class="w-80">
								<el-input v-model="formData.specifications" placeholder="请输入品种规格" />
							</div>
						</el-form-item>
						<el-form-item label="封面" prop="fming">
							<div>
								<div>
									<material-picker v-model="formData.fming" :limit="1" />
								</div>
								<!-- <div class="form-tips">建议尺寸：240*180px</div> -->
							</div>
						</el-form-item>
						<!--       <el-form-item label="作者" prop="author">
                            <div class="w-80">
                                <el-input v-model="formData.author" placeholder="请输入作者名称" />
                            </div>
                        </el-form-item> -->
						<el-form-item label="联系方式" prop="contacts" v-for="(item,index) in formData.contacts"
							:key="index" :rules="ruless">

							<div class="w-80">
								<el-input v-model="item.name" placeholder="请输入联系人" />
							</div>
							<div class="w-80">
								<el-input v-model="item.tel" placeholder="请输入联系人电话" />
							</div>
							<el-button type="danger" @click="delFn(index)">删除</el-button>
						</el-form-item>
						<div class="form-tips">最多添加七个联系人</div>
						<el-button type="primary" @click="addFn">添加联系人</el-button>
						<el-form-item label="排序" prop="sort">
							<div>
								<el-input-number v-model="formData.sort" :min="0" :max="9999" />
								<div class="form-tips">默认为0， 数值越大越排前</div>
							</div>
						</el-form-item>
						<!--  <el-form-item label="初始浏览量" prop="click_virtual">
                            <div>
                                <el-input-number v-model="formData.click_virtual" :min="0" />
                            </div>
                        </el-form-item>
                        <el-form-item label="文章状态" required prop="is_show">
                            <el-radio-group v-model="formData.is_show">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
					</div>
					<!-- <div class="xl:ml-20">
						<el-form-item label="文章内容" prop="ycxq">
							<editor v-model="formData.ycxq" :height="667" :width="375" />
						</el-form-item>
					</div> -->
					<div class="xl:ml-20">
						<el-form-item label="详情信息" prop="xqxx">
							<div class="w-80">
								<el-input v-model="formData.xqxx" placeholder="请输入详情信息" type="textarea"
									:autosize="{ minRows: 3, maxRows: 3 }" show-word-limit clearable />
							</div>
						</el-form-item>
						<!-- <el-form-item label="详情信息图片" prop="ycxq">
							<div class="w-80">
								<material-picker v-model="formData.fming" :limit="1" />
							</div>
						</el-form-item> -->
						<el-form-item label="详情图片" prop="ycxq">
						  <div>
						    <div style="display:flex; width: 500px; flex-wrap: wrap;">
						     <bolck v-for="(item,index) in formData.ycxq" :key="index" >
								  <material-picker v-model="formData.ycxq[index]" :limit="1" style="width:200rpx;margin-bottom:10px;"/>
							  </bolck>
							  
						    </div>
							<el-button type="primary" @click="addimg">添加图片</el-button>
							<el-button type="danger" @click="delimg">删除图片</el-button>
						  </div>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="primary" @click="handleSave">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="articleListsEdit">
	import type { FormInstance } from 'element-plus'
	import { useDictOptions } from '@/hooks/useDictOptions'
	import { articleDetail, articleEdit, articleAdd, articleCateAll, qualificationslist } from '@/api/article'
	import useMultipleTabs from '@/hooks/useMultipleTabs'
	import { onMounted } from "vue";

const loading = ref(false)
	const route = useRoute()
	const router = useRouter()
	const formData = reactive({
		name: '',
		fming: '',
		producer: '',
		ycxq: [0],
		sort: 0,
		specifications: '',
		q_id: null,
		contacts: [{ name: '', tel: null }],
		type:1,
		xqxx:''
	})
	const qiyexinxi = reactive({
		data: []
	})

const addimg=()=>{
	if(formData.ycxq.length==9){
		return
	}else{
		formData.ycxq.push(0)
	}
}
const delimg=()=>{
	if(formData.ycxq.length==1){
		return 
	}else{
		formData.ycxq.pop()
	}
}
const remoteMethod = (query: string) => {
  if (query) {
	  console.log(query,'query');
    loading.value = true
    // setTimeout(() => {
    //   loading.value = false
    //   // qiyexinxi.value.data = qiyexinxi.value.data.filter((item) => {
    //   //   return item.label.toLowerCase().includes(query.toLowerCase())
    //   // })
    // }, 3000)
	qualificationslist({name:query}).then(res => {
		//console.log(res.data);
		console.log(res, '111');
		qiyexinxi.data = res.lists
		console.log(qiyexinxi.data, 'qiyexinxi.data');
		 loading.value = false
	})
	
  } else {
    qiyexinxi.value.data = []
  }
}



	const delFn = (index) => {
		formData.contacts.splice(index, 1);
	}

	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		name: [{ required: true, message: '请输入采购内容', trigger: 'blur' }],
		eid: [{ required: true, message: '请选择企业', trigger: 'blur' }],
		producer: [{ required: true, message: '请输入产地', trigger: 'blur' }],
		specifications: [{ required: true, message: '请输入规格', trigger: 'blur' }],
		fming: [{ required: true, message: '请选择图片', trigger: 'blur' }],
		ycxq: [{ required: true, message: '请输入内容', trigger: 'blur' }],

	})

	// const ruless = reactive({
	// 	tel: [
	// 		{ required: true, message: '请输入电话号码', trigger: 'blur' }
	// 	],
	// 	name:[{ required: true, message: '请输入采购内容', trigger: 'blur' }]
	// })
	const getDetails = async () => {
		const data = await articleDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

	const { optionsData } = useDictOptions<{
		article_cate : any[]
	}>({
		article_cate: {
			api: articleCateAll
		}
	})

	const handleSave = async () => {


		// var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/




		await formRef.value?.validate()

		await articleAdd(formData)

		removeTab()
		router.back()
	}
	onMounted(() => {
		qualificationslist().then(res => {
			//console.log(res.data);
			console.log(res, '111');
			qiyexinxi.data = res.lists
		})
		// 在这里执行与 onLoad 类似的操作
	});


	const addFn = () => {

		if (formData.contacts.length > 6) {
			return false
		}
		formData.contacts.push({
			name: '',
			tel: null
		})
	}
	route.query.id && getDetails()
</script>